<template>
  <div class="palyer">
    <audio controls>
      <source src="巫启贤.mp3" type="audio/mpeg" />
      您的浏览器不支持 audio 元素。
    </audio>
    <div class="audio">
      <section class="progress">
        <progress value="23" max="100" min="0" style="height: 7px"></progress>
      </section>
      <section class="components">
        <div class="pic">
          <img src="../assets/imgs/logo.jpg" alt="" />
        </div>
        <div class="name">
          <span class="song">新地球</span> -
          <span class="singer">林俊杰</span>
        </div>
        <div class="controller">
          <i class="iconfont icon-shangyishou"></i>
          <i class="iconfont icon-zanting_o"></i>
          <i class="iconfont icon-xiayishou"></i>
        </div>
        <div class="info">02:03 / 5:00</div>
      </section>
    </div>
  </div>
</template>

<script>
import { GetMusic } from "@/api/request";
export default {
  name: "MyPlayer",
  setup() {
    GetMusic();
  },
};
</script>

<style scoped>
audio {
  position: absolute;
  bottom: 100px;
  width: 78vw;
}
.audio {
  position: fixed;
  bottom: 0;
  width: 78vw;
  height: 60px;
  background: #fff;
  z-index: 100;
}
progress {
  width: 78vw;
}
.components {
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.components .pic {
  height: 30px;
  width: 30px;
  border-radius: 5px;
  overflow: hidden;
}
.components .pic img {
  width: 30px;
  height: 30px;
}
.components .name {
  font-size: 14px;
  color: #666;
}
.components .controller i {
  font-size: 30px;
}
</style>